<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>paopao</title>
    <style>
        body{
            background-color: black;
        }
        .textcontainer {
            padding: 40px 0;
            text-align: center;
        }
        .mate-move-box{
            width: 200px;
            height: 280px;
            position: relative;
        }
        .particle {
            opacity: 0;
            position: absolute;
            background-color: rgba(72, 204, 190, .8);
            -webkit-animation: bubbles 3s ease-in infinite;
            animation: bubbles 3s ease-in infinite;
            border-radius: 100%;
        }

        @keyframes bubbles {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 1;
                -webkit-transform: translate(0, -20%);
                transform: translate(0, -20%);
            }

            100% {
                opacity: 0;
                -webkit-transform: translate(0, -1000%);
                transform: translate(0, -1000%);
            }
        }
        @keyframes top {
            0% {
                bottom: 0;
            }
            50% {
                bottom: 20px;
            }
            100% {
                bottom: 0;
            }
        }
        @keyframes top1 {
            0% {
                bottom: 60px;
            }
            50% {
                bottom: 70px;
            }
            100% {
                bottom: 60px;
            }
        }
        @keyframes top2 {
            0% {
                top: 60px;
            }
            50% {
                transform: translateX(-50%) rotate3d(53, 23, 40, -72deg) scale(1.2);
                top: 30px;
                opacity: .8;
            }
            100% {
                transform: translateX(-50%) rotate3d(53, 23, 40, -72deg) scale(1.4);
                top: 0px;
                opacity: .2;
            }
        }
        @keyframes light {
            0% {
                opacity: 1;
            }
            30% {
                bottom: 0.8;
            }
            50% {
                bottom: 0.6;
            }
            75% {
                bottom: 0.8;
            }
            100% {
                bottom: 1;
            }
        }
        .shadow{
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            animation: top 3s cubic-bezier(0, 0, 1, 0.99) infinite;
        }
        .box-di{
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 12;
        }
        .box-light{
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 13;
            animation: light 3s cubic-bezier(0, 0, 1, 0.99) infinite;
        }
        .zuo2{
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 12;
        }
        .zuo1{
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 12;
            animation: top1 3s cubic-bezier(0, 0, 1, 0.99) infinite;
        }
        .line{
            position: absolute;
            left: 50%;
            top: 60px;
            width: 100px;
            height: 100px;
            border: 2px solid rgba(72, 207, 195, .3);
            transform: translateX(-50%) rotate3d(53, 23, 40, -72deg)
        }
        .line-big{
            width: 140px;
            height: 140px;
            transform: translateX(-50%) rotate3d(53, 23, 40, -72deg)
        }
        .line-1{
            animation: top2 3s cubic-bezier(0, 0, 1, 0.99)  infinite;
        }
        .line-2{
            animation: top2 3s cubic-bezier(0, 0, 1, 0.99)  1s infinite;
        }
    </style>
</head>

<body>
    <div class="textcontainer">
        <div class="mate-move-box">
            <img class="shadow" src="./images/shadow.png" alt="">
            <img class="box-di" src="./images/di.png" alt="">
            <img class="box-light" src="./images/light.png" alt="">
            <img class="zuo2" src="./images/zuo2.png" alt="">
            <img class="zuo1" src="./images/zuo1.png" alt="">
            <div class="line line-1"></div>
            <div class="line line-2"></div>
        </div>
    </div>
    <script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
    <script>
        function initparticles() {
            bubbles();
        }

        function bubbles() {
            $.each($(".mate-move-box"), function () {
                var bubblecount = ($(this).width() / 50) * 10;
                for (var i = 0; i <= bubblecount; i++) {
                    var size = $.rnd(2, 8);
                    $(this).append('<span class="particle" style="top:' + $.rnd(20, 80) + '%; left:' + $.rnd(0, 95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0, 30) / 10) + 's;"></span>');
                }
            });
        }

        jQuery.rnd = function (m, n) {
            m = parseInt(m);
            n = parseInt(n);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }

        initparticles();
    </script>
</body>

</html>